<template>
  <div>
    <div class="page-body">
      <app-menu class="page-menu" :class="{ 'page-menu-collapse': appState.menuCollapse }"></app-menu>
      <div class="page-right">
        <div class="page-con-right">
          <app-header class="page-header"></app-header>
          <app-tabs class="page-tabs"></app-tabs>
          <div class="page-main" v-if="selectTabItem">
            <div class="page-main-card">
              <keep-alive :include="tabCacheNameList">
                <component v-if="selectTabItem.pageComponent" :is="selectTabItem.pageComponent" :key="selectTabItem.id"
                  style="width:100%;height:100%"></component>
                <component v-else :is="AppLoading" style="width:100%;height:100%"></component>
              </keep-alive>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  name: "AppHome",
})
</script>

<script lang="ts" setup>
import { tabCacheNameList, selectTabItem } from "@/store/tabs";
import { appState, getMenuActionList } from "@/store/app";

import AppMenu from "./components/AppMenu";
import AppHeader from "./components/AppHeader";
import AppTabs from "./components/AppTabs";
import AppLoading from "../AppLoading";

//获取菜单列表
getMenuActionList();

</script>

<style lang="less" scoped>
@import url("./config.less");

.page-body {
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f7;
  display: flex;
}

.page-menu {
  flex-shrink: 0;
  width: @menuWidth;
  height: 100%;
  transition: width 0.5s;
  position: relative;
  box-shadow: 0px 0 10px 1px rgba(0, 0, 0, 0.08);
  z-index: 3;
}

.page-right {
  display: flex;
  height: 100%;
  flex-grow: 1;
}

.page-con {

  //height: calc(100% - @headerHeight);
}

.page-header {
  height: @headerHeight;
  // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


.page-menu-collapse {
  width: @menuCollapseWidth;
}

.page-con-right {
  width: 0;
  flex-grow: 1;
}

.page-tabs {
  height: @tabsHeight + 10px;
  padding: 5px 0;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.08);
  // background-color: rgba(0, 0, 0, 0.02);
}


.page-main {
  height: calc(100% - @tabsHeight - @headerHeight - 10px);
  width: 100%;
  z-index: 1;
  // background-color: rgb(241 242 248);
  overflow: auto;
}

.page-main-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--app-border-radius);
  // border: 1px solid rgba(0, 0, 0, 0.01);
  min-width: 900px;
  // background-color: white;
  // border-top: 1px solid rgba(0, 0, 0, 0.1);
}
</style>
